﻿<%@page contentType="text/html;charset=UTF-8"%>
<%@page import="com.silknet.general.HtmlProcessor"%>
<%@page import="com.silknet.db.DBOperations"%>
<html>
<head>
<title>Silknet Map</title>
<link rel="shortcut icon" href="favicon.png" />
<style type="text/css">
html,body {
	height: 100%;
	margin: 0;
	padding: 0;
}

#main {
	height: 100%;
}

#header {
	background: blue;
	height: 5%;
}

.wrapper {
	height: 95%;
}

#map,#right {
	height: 100%;
}

#map {
	float: left;
	width: 100%;
}

#right {
	background: blue;
	float: right;
	width: 20%;
}

.autocomplete-w1 {
	background: url(img/shadow.png) no-repeat bottom right;
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 8px 0 0 6px; /* IE6 fix: */
	_background: none;
	_margin: 0;
}

.autocomplete {
	border: 1px solid #999;
	background: #FFF;
	cursor: default;
	text-align: left;
	max-height: 350px;
	overflow: auto;
	margin: -6px 6px 6px -6px; /* IE6 specific: */
	_height: 350px;
	_margin: 0;
	_overflow-x: hidden;
}

.autocomplete .selected {
	background: #F0F0F0;
}

.autocomplete div {
	padding: 2px 5px;
	white-space: nowrap;
}

.autocomplete strong {
	font-weight: normal;
	color: #3399FF;
}

ul.tree,ul.tree * {
	list-style-type: none;
	margin: 0;
	padding: 0 0 5px 0;
}

ul.tree img.arrow {
	padding: 2px 0 0 0;
	border: 0;
	width: 20px;
}

ul.tree li {
	padding: 4px 0 0 0;
}

ul.tree li ul {
	padding: 0 0 0 20px;
	margin: 0;
}

ul.tree label {
	cursor: pointer;
	font-weight: bold;
	padding: 2px 0;
}

ul.tree label.hover {
	color: red;
}

p {
	margin: 5px 15px;
}

ul {
	margin-top: 5px;
	margin-bottom: 5px;
}

ul.tree li .arrow {
	width: 20px;
	height: 20px;
	padding: 0;
	margin: 0;
	cursor: pointer;
	float: left;
	background: transparent no-repeat 0 4px;
}

ul.tree li .collapsed {
	background-image: url(collapsed.gif);
}

ul.tree li .expanded {
	background-image: url(expanded.gif);
}

ul.tree li .checkbox {
	width: 20px;
	height: 18px;
	padding: 0;
	margin: 0;
	cursor: pointer;
	float: left;
	background: url(check0.gif) no-repeat 0 0px;
}

ul.tree li .checked {
	background-image: url(check2.gif);
}

ul.tree li .half_checked {
	background-image: url(check1.gif);
}
</style>
</head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.checktree.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="easyui.css">
<link rel="stylesheet" type="text/css" href="icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<script
	src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAfsl_L9mw-6t-Kc5d4mFU2RR_Iwm7H5kjHJ-YG3vpNGV1oLtfdRTXJHoN8cQ24WvaYEKq6XccU1Hjeg'></script>



<body onload="initContainer()">
	<div id="main">
		<div id="header">
			<input id="cc" class="easyui-combotree" url="getobjecttypescombo.jsp"
				value="-1" required="true" style="width: 300px;"
				onSelect="javascript:comboValueChanged();"> ობიექტი<input
				type="text" name="q" id="query"
				onFocus="javascript:comboValueChanged();" style="width: 200px;" />ქუჩა
			<input type="text" name="q1" id="query1" style="width: 200px;" />
			ქუჩის № <input type="text" name="buldN" id="buldN" style="width: 50px;" />
			<input type="button" value="Search"
				onclick="JavaScript:searchDataByCriteria()" />
			<input type="checkbox" name="cbGoogle" id="cbGoogle" value="Bike"
				onclick="setGoogle();" /> <img src="images/google_earth.png"
				height="16px" width="16px" />
		</div>
		<div class="wrapper">
			<div id="map"></div>
			<div id="right">
				<%
					out.print(HtmlProcessor.getMenu(request, application));
				%>
			</div>
		</div>
	</div>
	<script type="text/javascript"
		src="http://31.146.1.178:8080/BetterFlyR/OpenLayers.js"></script>
	<script type="text/javascript" src="featureattributes.js"></script>


	<script src="utf8.js" type="text/javascript"></script>
	<script src="base64.js" type="text/javascript"></script>
	<script src="jquery.autocomplete.js" type="text/javascript"></script>


	<script type="text/javascript">
		OpenLayers.DOTS_PER_INCH = 90.71428571428572;
		OpenLayers.Util.onImageLoadErrorColor = 'transparent';
		var map, demolayer, gmap;

		function initMapContainer() {
			var mapOptions = {
				resolutions : [ 156543.03390625, 78271.516953125,
						39135.7584765625, 19567.87923828125, 9783.939619140625,
						4891.9698095703125, 2445.9849047851562,
						1222.9924523925781, 611.4962261962891,
						305.74811309814453, 152.87405654907226,
						76.43702827453613, 38.218514137268066,
						19.109257068634033, 9.554628534317017,
						4.777314267158508, 2.388657133579254,
						1.194328566789627, 0.5971642833948135,
						0.29858214169740677, 0.14929107084870338,
						0.07464553542435169, 0.037322767712175846,
						0.018661383856087923, 0.009330691928043961,
						0.004665345964021981 ],
				projection : new OpenLayers.Projection('EPSG:900913'),
				maxExtent : new OpenLayers.Bounds(-2.003750834E7,
						-2.003750834E7, 2.003750834E7, 2.003750834E7),
				units : "meters",
				displayProjection : 'EPSG:4326',
				controls : []
			};
			map = new OpenLayers.Map('map', mapOptions);
			map.addControl(new OpenLayers.Control.PanZoomBar({
				position : new OpenLayers.Pixel(2, 15)
			}));
			map.addControl(new OpenLayers.Control.Navigation());
			map.addControl(new OpenLayers.Control.LayerSwitcher());
			map.addControl(new OpenLayers.Control.Scale($('scale')));
			map.addControl(new OpenLayers.Control.MousePosition({
				element : $('location')
			}));
			gmap = new OpenLayers.Layer.Google("Google Streets", // the default
			{
				type : G_SATELLITE_MAP,
				sphericalMercator : true,
				numZoomLevels : 20
			});
			demolayer = new OpenLayers.Layer.WMS("TbilisiOSMStyleTiles",
					"http://31.146.1.178:8080/GeoRauting/gwc/service/wms", {
						layers : 'TbilisiOSMStyleTiles',
						format : 'image/png',
						transparent : 'true'
					}, {
						sphericalMercator : false,
						tileSize : new OpenLayers.Size(256, 256)
					});
			demolayer.setIsBaseLayer(true);
			gmap.setIsBaseLayer(false);

			map.addLayers([ demolayer ]);
			map.zoomToExtent(new OpenLayers.Bounds(4964135.789847856,
					5103375.605684249, 5011387.831226947, 5137746.453049102));
			// The following is just for GetFeatureInfo, which is not cached. Most people do not need this
			initClusterMap(map);
			//loadPoints();
		}
		function setHTML(response) {
			document.getElementById('nodelist').innerHTML = response.responseText;
		};
	</script>
	<script type="text/javascript">
		var options, optionsstreet, a, a1, object_type_val;
		var old_object_type = -1;
		function reload() {
			$('#cc').combotree('reload');
		}
		function setValue() {
			$('#cc').combotree('setValue', 2);
		}
		function getValue() {
			var val = $('#cc').combotree('getValue');
			alert(val);
		}
		function disable() {
			$('#cc').combotree('disable');
		}
		function enable() {
			$('#cc').combotree('enable');
		}
		function setGoogle() {

			if (cbGoogle.checked)
				map.addLayer(gmap);
			else
				map.removeLayer(gmap);
		}
		$('#pois > li > a').click(function() {
			$(this).parents('ul').toggleClass('expanded');
		});
		$(function() {

			jQuery(function() {
				options = {
					serviceUrl : 'getobjectnames.jsp',
					minChars : 2,
					delimiter : /(,|;)\s*/, // regex or character
					maxHeight : 400,
					width : 300,
					zIndex : 9999,
					deferRequestBy : 0,
					params : {
						object_type : -1
					}
				//aditional parameters
				};
				optionsstreet = {
					serviceUrl : 'getstreetnames.jsp',
					minChars : 2,
					delimiter : /(,|;)\s*/, // regex or character
					maxHeight : 400,
					width : 300,
					zIndex : 9999,
					deferRequestBy : 0,
					params : {
						object_type : -1
					}
				//aditional parameters
				};
				a = $('#query').autocomplete(options);
				a1 = $('#query1').autocomplete(optionsstreet);
			});

		});
	</script>
	<script type="text/javascript">
		$(document).ready(function() {

			$("ul.tree").checkTree({
			/*
			// You can add callbacks to the expand, collapse, check, uncheck, and  halfcheck
			// events of the tree. The element you use as the argument is the LI element of
			// the object that fired the event.
			onExpand: function(el) {
				console.log("expanded ", el.find("label:first").text());
			},
			onCollapse: function(el) {
				console.log("collapsed ", el.find("label:first").text());
			},
			onCheck: function(el) {
				console.log("checked ", el.find("label:first").text());
			},
			onUnCheck: function(el) {
				alert("un checked ", el.find("label:first").text());
				console.log("un checked ", el.find("label:first").text());
			},
			onHalfCheck: function(el) {
				console.log("half checked ", el.find("label:first").text());
			}*/
			/*
			// You can set the labelAction variable to either "check" or "expand" 
			// to change what happens when you click on the label item.
			// The default is expand, which expands the tree. Check will toggle
			// the checked state of the items.
			labelAction: "expand"
			 */
			/*
			// You can also change what happens when you hover over a label (over and out)
			onLabelHoverOver: function(el) { alert("You hovered over " + el.text()); },
			onLabelHoverOut: function(el) { alert("You hovered out of " + el.text()); }
			 */
			});
		});
		function comboValueChanged() {

			var pr = $('#cc').parent();
			if (pr) {
				var pv = $(pr).find("[class$='combo-value']");
				if (pv) {
					var val = $(pv).attr('value');

					if (val && old_object_type != val) {
						old_object_type = val;
						options.params['object_type'] = val;
						try {
							if (val != -1)
								a.clearCache();
							object_type_val = val;
						} catch (e) {
							//alert(e.description+'clearCache');
						}
						try {
							a.setOptions(options);
						} catch (e) {
							//alert(e.description+'setOptions');
						}

					}
				}
			}

		}
		function initContainer() {

			initMapContainer();

		}
	</script>
</body>
</html>
